<script setup>
// import {  Plus } from '@element-plus/icons-vue'
import { defineProps, defineEmits, onBeforeMount } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ref, } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
    limit: {
        default: 1
    },
    fileList: {
        default: []
    },
    index:{
        default:null  //如果有循环此组件 （评价页面）
    },
})
let httpRequestImg = ref(false)

onBeforeMount(() => {
    httpRequestImg.value = props.limit == 1 && JSON.parse(JSON.stringify(props.fileList)).length == 1
})

//文件上传  
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// 图片上传成功
const emit = defineEmits(['handleRemove', 'handleSuccessed'])
const handleSuccessed = (response, files) => {
    if (response.code == 200) {
        console.log(response.data.file_path, files)
        if (props.limit == 1) {
            httpRequestImg.value = true
        }
        emit('handleSuccessed', response.data.file_path, props.limit == 1,props.index)
    }
}
// // 删除图片
const handleRemove = (file) => {
    httpRequestImg.value = false
    emit('handleRemove', file,props.index)
}

// 查看图片
const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}
// 限制图片上传数量
const handleExceed = () => {
    ElMessage({
        message: `最多选择${props.limit}张图片`,
        type: 'warning',
    })
}
const handleimageChange = () => {
    if (props.limit == 1) {
        httpRequestImg.value = true
    }
}
</script>
<template>
    <el-upload :class="{ 'demo-httpRequestImg': httpRequestImg }" class="avatar-uploader"
        action="http://pc.aucfan-cn.com/api/pc/com/file" :on-remove="handleRemove" :on-preview="handlePictureCardPreview"
        :on-change="handleimageChange" :on-exceed="handleExceed" list-type="picture-card" :auto-upload="true"
        :limit=props.limit :file-list="props.fileList" :on-success='handleSuccessed' ref="pictureUpload">
        <div class="center">
            <el-icon> 
                <Plus />
            </el-icon>
            <div class="marT2">{{ props.limit > 1 ? '上传图片/视频' : '上传图片' }}</div>
        </div>  
    </el-upload>
    <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>
<style lang="less" scoped>
.demo-httpRequestImg {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
</style>
